<template>
  <div class="data-repo-layout">
    <!-- 侧边导航 -->
    <FlowChartNav @tab-change="handleTabChange" />

    <!-- 主内容区 -->
    <div class="data-repo-container">
      <h1>数据仓库管理</h1>
      <div v-if="activeStep === 'DataImport'" class="step-content">
        <el-tabs v-model="activeTab" class="repo-tabs">
          <!-- 我的数据 -->
          <el-tab-pane label="我的数据" name="myData">
            <div class="form-section">
              <el-form :model="myDataForm" label-width="120px">
                <el-form-item label="数据名称" required>
                  <el-input v-model="myDataForm.name" placeholder="请输入数据集名称"></el-input>
                </el-form-item>

                <el-form-item label="数据类型">
                  <el-select v-model="myDataForm.type" placeholder="请选择数据类型">
                    <el-option label="结构化数据" value="structured"></el-option>
                    <el-option label="时间序列" value="timeSeries"></el-option>
                    <el-option label="图像数据" value="image"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="数据来源">
                  <el-radio-group v-model="myDataForm.source">
                    <el-radio label="upload">本地上传</el-radio>
                    <el-radio label="database">数据库导入</el-radio>
                    <el-radio label="api">API接入</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="数据文件" v-if="myDataForm.source === 'upload'">
                  <el-upload class="upload-demo" action="#" :on-change="handleMyDataUpload" :auto-upload="false">
                    <el-button type="primary">选择文件</el-button>
                    <div class="el-upload__tip">支持CSV, JSON, Excel格式</div>
                  </el-upload>
                </el-form-item>

                <el-form-item label="创建日期">
                  <el-date-picker v-model="myDataForm.createDate" type="date" placeholder="选择创建日期" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" />
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="createMyData">创建</el-button>
                  <el-button @click="resetMyDataForm">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>

          <!-- 外部数据 -->
          <el-tab-pane label="外部数据" name="externalData">
            <div class="form-section">
              <el-form :model="externalDataForm" label-width="120px">
                <el-form-item label="数据名称" required>
                  <el-input v-model="externalDataForm.name" placeholder="请输入数据集名称"></el-input>
                </el-form-item>

                <el-form-item label="数据来源">
                  <el-select v-model="externalDataForm.source" placeholder="选择数据平台">
                    <el-option v-for="source in externalSources" :key="source.value" :label="source.label"
                      :value="source.value">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="API密钥" v-if="externalDataForm.source">
                  <el-input v-model="externalDataForm.apiKey" placeholder="输入API密钥" show-password></el-input>
                </el-form-item>

                <el-form-item label="数据参数">
                  <el-input type="textarea" v-model="externalDataForm.params" :rows="3"
                    placeholder="输入查询参数(JSON格式)"></el-input>
                </el-form-item>

                <el-form-item label="数据类型">
                  <el-select v-model="externalDataForm.dataType" placeholder="选择数据类型">
                    <el-option label="结构化数据" value="structured"></el-option>
                    <el-option label="时间序列" value="timeSeries"></el-option>
                    <el-option label="图像数据" value="image"></el-option>
                    <el-option label="文本数据" value="text"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="发布时间范围">
                  <el-date-picker v-model="externalDataForm.publishDateRange" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                </el-form-item>

                <el-form-item label="关键词检索">
                  <el-input v-model="externalDataForm.searchKeyword" placeholder="输入检索关键词" />
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="connectExternalData">连接</el-button>
                  <el-button @click="resetExternalDataForm">重置</el-button>
                  <el-button @click="searchExternalData">检索</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div v-if="activeStep === 'DataProcess'" class="step-content">
        <DataProcess @process-complete="handleProcessComplete" />
      </div>

      <div v-if="activeStep === 'DataAnalysis'" class="step-content">
        <h3>数据分析</h3>
        <el-form :model="analysisForm" label-width="120px">
          <el-form-item label="分析模型">
            <el-select v-model="analysisForm.model" placeholder="选择分析模型">
              <el-option label="回归分析" value="regression"></el-option>
              <el-option label="分类分析" value="classification"></el-option>
              <el-option label="聚类分析" value="clustering"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="参数设置">
            <el-input type="textarea" v-model="analysisForm.params" :rows="3" placeholder="输入模型参数(JSON格式)"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="runAnalysis">执行分析</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import FlowChartNav from '@/components/FlowChartNav.vue'
import DataProcess from '@/components/DataProcess.vue'
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const activeStep = ref('DataImport')

const activeTab = ref('myData')

// 我的数据表单
const myDataForm = reactive({
  name: '',
  type: '',
  source: 'upload',
  file: null,
  createDate: new Date().toISOString().split('T')[0] // 默认当前日期
})

// 外部数据表单
const externalDataForm = reactive({
  name: '',
  source: '',
  apiKey: '',
  params: '',
  dataType: '',
  publishDateRange: [],
  searchKeyword: ''
})

// 外部数据平台选项
const externalSources = [
  { label: 'Kaggle', value: 'kaggle' },
  { label: 'Google数据集', value: 'google' },
  { label: '政府开放数据', value: 'gov' }
]

// 我的数据上传处理
const handleMyDataUpload = (file) => {
  myDataForm.file = file
  ElMessage.success(`已选择文件: ${file.name}`)
}

// 创建我的数据
const createMyData = () => {
  if (!myDataForm.name) {
    ElMessage.warning('请输入数据名称')
    return
  }
  ElMessage.success(`数据集 ${myDataForm.name} 创建成功!`)
}

// 重置我的数据表单
const resetMyDataForm = () => {
  Object.assign(myDataForm, {
    name: '',
    type: '',
    source: 'upload',
    file: null,
    createDate: new Date().toISOString().split('T')[0] // 重置为当前日期
  })
}

// 连接外部数据
const connectExternalData = () => {
  if (!externalDataForm.name || !externalDataForm.source) {
    ElMessage.warning('请填写完整信息')
    return
  }
  ElMessage.success(`成功连接 ${externalDataForm.source} 数据源!`)
}

// 检索外部数据
const searchExternalData = () => {
  if (!externalDataForm.source) {
    ElMessage.warning('请先选择数据来源')
    return
  }
  ElMessage.success('正在检索外部数据...')
}

// 重置外部数据表单
const resetExternalDataForm = () => {
  Object.assign(externalDataForm, {
    name: '',
    source: '',
    apiKey: '',
    params: '',
    dataType: '',
    publishDateRange: [],
    searchKeyword: ''
  })
}
const handleProcessComplete = () => {
  activeStep.value = 'DataAnalysis'
}

const runAnalysis = () => {
  ElMessage.success('开始执行数据分析')
}

const handleStepChange = (step) => {
  activeStep.value = step
}

onMounted(() => {
  // 监听全局自定义事件
  document.addEventListener('step-change', (e) => {
    handleStepChange(e.detail)
  })
})
</script>

<style scoped>
.data-repo-layout {
  display: flex;
  min-height: calc(100vh - 60px);
}

.data-repo-container {
  flex: 1;
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.step-content {
  margin-top: 24px;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.repo-tabs {
  margin-top: 24px;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.form-section {
  padding: 20px 0;
}

.upload-demo {
  margin-top: 8px;
}
</style>